<template>

	<div class="mainViewBig" :style="{'background-image':'url('+backGroundImg.fileBlob+')'}">
		<div class="_content">
			<div class="_bt1">
				<h1 class="_bt1_txt" ref="bt1Txt">{{ prewValue.topicName1 }}</h1>
			</div>
			<div class="_bt1">
				<h1 class="_bt1_txt" ref="bt2Txt">{{ prewValue.topicName2 }}</h1>
			</div>
		</div>
		<div class="_dw">
			<p class="_tips">{{ prewValue.unitName1 }}</p>
			<p class="_tips">{{ prewValue.unitName2 }}</p>
			<p class="_tips">{{ prewValue.topicDate }}</p>
			<div class="_bottom">
				<p>{{ prewValue.markName }}</p>
			</div>
		</div>
	</div>
</template>

<script>
	// import "../big-screen/bigScreen.scss";
	import elementResizeDetectorMaker from 'element-resize-detector'
	export default {
		props: ['themeInfo','backImage'],
		data(){
			return {
				// themeInfo: {},
				backGroundImg: {fileBlob:''},
				prewValue:{}
			}
		},
		methods: {
			setFontSize1(){//标题1 2缩放
				let erd = elementResizeDetectorMaker()
				let bt1Txt = this.$refs.bt1Txt
				let scaleX1 = 1;
				erd.listenTo(bt1Txt, (element) => {
					if (element.clientWidth > 1720) {
						scaleX1= 1720/element.clientWidth
					}else {
						scaleX1 = 1
					}
					bt1Txt.style.transform  = 'scaleX('  + scaleX1 + ')';
				})
			},
			setFontSize2(){//标题1 2缩放
				let erd = elementResizeDetectorMaker()
				let bt2Txt = this.$refs.bt2Txt
				let scaleX2 = 1;
				erd.listenTo(bt2Txt, (element) => {
					if (element.clientWidth > 1720) {
						scaleX2= 1720/element.clientWidth
					}else {
						scaleX2 = 1
					}
					bt2Txt.style.transform  = 'scaleX(' + scaleX2 +')';
				})
			}
		},
		watch: {
			backImage:{
				handler(newValue,oldValue){
					this.backGroundImg = newValue;

				},
				deep:true
			},
			themeInfo:{
				handler(newValue,oldValue){
					this.prewValue = Object.assign({},newValue);
					if(this.prewValue.topicName1.length > 15){
						this.setFontSize1()
					}
					if(this.prewValue.topicName2.length > 15){
						this.setFontSize2()
					}
				},
				deep:true
			}
		},
		mounted() {
			let self = this;
			self.setFontSize1();
			self.setFontSize2();
		},
	}
</script>

<style lang="scss" scoped>
	 @import "@/views/basic-data/big-screen/bigScreen.scss";
	.mainViewBig {
		background-size: cover;
	}
</style>